import { Textarea, View, Text } from "@tarojs/components";
import { Dialog, Button } from "@taroify/core";
import { memo } from "react";
import { useState, useEffect } from "react";
import { ConfigProvider } from "@taroify/core";
import "./index.scss";
interface BtDProps {
  title?: string;
  content?: string;
  open?: boolean;
  cancel?: boolean;
  // 取消文字
  cancelText?: string;
  // 确认文字
  confirmText?: string;
  onClose?: () => void;
  onSetremark?: (value: string) => void;
  handleConfirm?: () => void;
  handleCancel?: () => void;
  children?: React.ReactNode;
}

function BtDialog({
  title = "提示",
  cancelText,
  confirmText,
  open = false,
  cancel = true,
  onClose,
  handleConfirm,
  children,
}: BtDProps) {
  const [opens, setOpen] = useState(open);
  useEffect(() => {
    setOpen(open);
  }, [open]);

  return (
    <ConfigProvider
      theme={{
        dialogWidth: !cancel ? "100vw" : "680rpx",
      }}
    >
      <Dialog open={opens} onClose={setOpen}>
        <Dialog.Header className="dialog-header">{title}</Dialog.Header>
        <Dialog.Content>{children}</Dialog.Content>
        <Dialog.Actions>
          <View className="dialog-actions">
            {cancel && (
              <Button
                className="dialog-actions-item dialog-actions-item-cancel"
                onClick={() => onClose && onClose()}
              >
                {cancelText || "取消"}
              </Button>
            )}
            <Button
              className={`dialog-actions-item dialog-actions-item-pass`}
              onClick={() => handleConfirm && handleConfirm()}
            >
              {confirmText || "确认"}
            </Button>
          </View>
        </Dialog.Actions>
      </Dialog>
    </ConfigProvider>
  );
}

export default memo(BtDialog);
